{% set selectedVersion = (postgresql.settings.global.version is defined
                          and postgresql.settings.global.version is not empty)
    ? postgresql.settings.global.version
    : false %}
{% set versions = selectedVersion
    ? merge_unique([selectedVersion], postgresql.available.versions)
    : postgresql.available.versions %}

<input type="hidden" name="postgresql[install]" value="0" />

<div class="container-fluid cm-container-white section-title">
    <div class="checkbox checkbox-lg no-padding">
        <input type="checkbox" id="postgresql-install"
               name="postgresql[install]" value="1"
               {% if postgresql.install %}checked{% endif %}
               data-toggle="checkbox-collapse" data-target="#postgresql-container" />
        <label for="postgresql-install">Install PostgreSQL</label>

        <p>
            The world's most advanced open source database.
        </p>
    </div>
</div>

<div id="postgresql-container"
     class="container-fluid collapse {% if postgresql.install %}in{% endif %}">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group col-xs-12 col-sm-6">
                <label for="postgresql-settings-global-version">
                    Version
                </label>
                <select id="postgresql-settings-global-version"
                        name="postgresql[settings][global][version]"
                        class="form-control select-tag">
                {% for version in versions %}
                    <option value="{{ version }}"
                        {% if version == selectedVersion %}selected{% endif %}>{{ version }}</option>
                {% endfor %}
                </select>
            </div>

            <div class="form-group col-xs-12 col-sm-6">
                <label for="postgresql-settings-server-postgres_password">
                    Root Password
                </label>
                <input type="text" id="postgresql-settings-server-postgres_password"
                       name="postgresql[settings][server][postgres_password]"
                       placeholder="123" class="form-control"
                       value="{{ postgresql.settings.server.postgres_password }}" />
                <div class="help-block">
                    Assign a password to the root user.
                    <strong>Database will only be installed
                    when a password is entered here.</strong>
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="help-block">
                <p>The preferred way to connect to your database is using a dedicated
                    application like
                    <a href="http://www.valentina-db.com/valentina-studio-overview"
                       target="_blank">Valentina Studio (OS X)</a> and
                    <a href="http://www.pgadmin.org/" target="_blank">pgAdmin (Cross Platform)</a>.</p>
                <p>Connect using SSH tunnel, username <code>vagrant</code> and SSH key generated at
                    <code>puphpet/files/dot/ssh/id_rsa</code>. This key is generated <strong>after</strong>
                    your initial <code>$ vagrant up</code>!</p>
                <p>To login via CLI, you must use
                    <code>$ psql {DBUSERNAME} -h 127.0.0.1 -d {DBNAME}</code></p>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-primary">
        <div class="panel-heading">Users</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="add">
                    <a href="{{ path('puphpet.postgresql.add_user') }}"
                       data-toggle="add-block">
                        <i class="fa fa-plus"></i> Add</a>
                </li>
                {% for index, user in postgresql.users %}
                    {% set blockId = "postgresql-users-#{index}" %}
                    {% set blockName = "postgresql[users][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add a user
                </div>
                {% for index, user in postgresql.users %}
                    {% include 'PuphpetBundle:postgresql:user.html.twig' with {
                        'user': user,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-primary">
        <div class="panel-heading">Databases</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="add">
                    <a href="{{ path('puphpet.postgresql.add_database') }}"
                       data-toggle="add-block">
                        <i class="fa fa-plus"></i> Add</a>
                </li>
                {% for index, database in postgresql.databases %}
                    {% set blockId = "postgresql-databases-#{index}" %}
                    {% set blockName = "postgresql[databases][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add a database
                </div>
                {% for index, database in postgresql.databases %}
                    {% include 'PuphpetBundle:postgresql:database.html.twig' with {
                        'database': database,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-primary">
        <div class="panel-heading">Grants</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="add">
                    <a href="{{ path('puphpet.postgresql.add_grant') }}"
                       data-toggle="add-block">
                        <i class="fa fa-plus"></i> Add</a>
                </li>
                {% for index, grant in postgresql.grants %}
                    {% set blockId = "postgresql-grants-#{index}" %}
                    {% set blockName = "postgresql[grants][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add a grant
                </div>
                {% for index, grant in postgresql.grants %}
                    {% include 'PuphpetBundle:postgresql:grant.html.twig' with {
                        'grant': grant,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="clearfix"></div>
</div>

<div class="container-fluid cm-container-white section-footer">
    <a href="#mysql" data-toggle="tab" class="btn btn-primary btn-lg pull-left">
        <i class="fa fa-arrow-left" aria-hidden="true"></i>
        MySQL
    </a>

    <a href="#mongodb" data-toggle="tab" class="btn btn-primary btn-lg pull-right">
        MongoDB
        <i class="fa fa-arrow-right" aria-hidden="true"></i>
    </a>
</div>
